import React from 'react'
import { Carousel, Flex, Grid, WingBlank } from 'antd-mobile'
import axios from 'axios'
import { getLocalCity } from '../../utils/localCity'

import {BASEURL} from '../../utils/baseurl'
import SearchHeader from '../../components/SearchHeader'

import nav1 from '../../assets/images/nav-1.png'
import nav2 from '../../assets/images/nav-2.png'
import nav3 from '../../assets/images/nav-3.png'
import nav4 from '../../assets/images/nav-4.png'

import './index.scss'

export default class Index extends React.Component {
  state = {
    swiperList: [],   
    groupList: [],
    newsList: [],
    localCity: '上海'
  }

  navItem = [{
    id: 0,
    img: nav1,
    title: '整租',
    path: '/home/list',
  }, {
    id: 1,
    img: nav2,
    title: '合租',
    path: '/home/list',
  }, {
    id: 2,
    img: nav3,
    title: '地图找房',
    path: '/map',
  }, {
    id: 3,
    img: nav4,
    title: '去出租',
    path: '/home/list',
  }]

  async getSwipers() {
    const {data} = await axios.get('http://127.2.2.1:8080/home/swiper')
    
    if(data.status !== 200) {
      return
    }

    this.setState({
      swiperList: data.body
    })
  }

  async getGroups() {
    const {data} = await axios.get('http://127.2.2.1:8080/home/groups', {
      params: {
        area: 'AREA%7C88cff55c-aaa4-e2e0'
      }
    }) 
    
    if(data.status !== 200) {
      return 
    }

    this.setState({
      groupList: data.body
    })
  }

  async getNews() {
    const {data} = await axios.get('http://127.2.2.1:8080/home/news', {
      params: {
        area: 'AREA%7C88cff55c-aaa4-e2e0'
      }
    }) 
    
    if(data.status !== 200) {
      return 
    }

    this.setState({
      newsList: data.body
    })
  }

  async getLocalCity() {
    const data = await getLocalCity()

    this.setState({
      localCity: data.label
    })
  }

  componentDidMount() {
    this.getSwipers()
    this.getGroups()
    this.getNews()
    this.getLocalCity()
  }

  renderSwiper() {
    return (<>
      {this.state.swiperList.length > 0 ? (
        <Carousel
          autoplay
          infinite
        >
          {this.state.swiperList.map(val => (
            <a
              key={val.id}
              href="http://www.alipay.com"
              style={{ display: 'inline-block', width: '100%', height: 210 }}
            >
              <img
                src={BASEURL + val.imgSrc}
                alt=""
                style={{ width: '100%', verticalAlign: 'top' }}
              />
            </a>
          ))}
        </Carousel>
      ) : (<div style={ {height: 210} }></div>)}

      <SearchHeader cityName={this.state.localCity}/>      
    </>)
  }

  renderNavBar() {
    return (
      <Flex className="nav-box">
        { this.navItem.map(item => {
          return (
            <Flex.Item key={item.id} onClick={ () => this.props.history.push(item.path) }>
              <img src={item.img} alt={item.title} />
              <div>{item.title}</div>
            </Flex.Item>
          )
        }) }
      </Flex>
    )
  }

  renderGroups(item) {
    return (
      <Flex className="group-item" justify="around">
        <div className="desc">
            <p className="title">{item.title}</p>
            <span className="info">{item.desc}</span>
        </div>
        <img src={`http://localhost:8080${item.imgSrc}`} alt="" />
      </Flex>
    )
  }

  renderGroup() {
    return (
      <div className="group">
        <h3 className="group-title">
          租房小组 <span className="more">更多</span>
        </h3>
        <Grid data={this.state.groupList}
          columnNum={2} 
          square={false}
          hasLine={false}
          renderItem={item => this.renderGroups(item)} 
        />
    </div>
    )
  }

  renderNews() {
    return (
      <div className="news">
        <h3 className="group-title">最新资讯</h3>
        <WingBlank size="md">
          { 
            this.state.newsList.map(item => {
              return (<div className="news-item" key={item.id}>
                <div className="imgwrap">
                  <img
                    className="img"
                      src={`http://localhost:8080${item.imgSrc}`}
                      alt=""
                  />
                </div>
                <Flex className="content" direction="column" justify="between">
                  <h3 className="title">{item.title}</h3>
                  <Flex className="info" justify="between">
                      <span>{item.from}</span>
                      <span>{item.date}</span>
                  </Flex>
                </Flex>
              </div>) 
            })
          }
        </WingBlank>
      </div>
    )
  }

  render() {
    return (
      <div className="index-box">
        {this.renderSwiper()}

        {this.renderNavBar()}

        {this.renderGroup()}

        {this.renderNews()}
      </div>
    )
  }
}
